import react, { FC, useState } from 'react'
import { IRouteComponentProps } from "umi"
import { Select, Table, Input } from 'antd';
import styles from './needHandle.less'
import { SearchOutlined } from '@ant-design/icons';

const { Option } = Select;

function onChange(value) {
    console.log(`selected ${value}`);
}

function onBlur() {
    console.log('blur');
}

function onFocus() {
    console.log('focus');
}

function onSearch(val) {
    console.log('search:', val);
}

const NeedHandle: FC<IRouteComponentProps> = props => {
    let [dataSource, setDataSource] = useState([])

    return <div className={styles.needHandle}>
        <div className={styles.title}>
            <div>
                <Select
                    showSearch
                    style={{ width: 200 }}
                    placeholder="请选择班级"
                    optionFilterProp="children"
                    onChange={onChange}
                    onFocus={onFocus}
                    onBlur={onBlur}
                    onSearch={onSearch}
                    filterOption={(input, option) =>
                        option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                    }
                >
                    <Option value="tom">网站2021A班</Option>
                </Select>
            </div>
            <div>
                <div>
                    <span><img src="http://111.203.59.61:8060/static/img/need_all.f33d257f.svg" alt="" /></span>
                    <dl>
                        <dt>0</dt>
                        <dd>全部</dd>
                    </dl>
                </div>
                <div>
                    <span><img src="http://111.203.59.61:8060/static/img/question.dd523812.svg" alt="" /></span>
                    <dl>
                        <dt>0</dt>
                        <dd>问答</dd>
                    </dl>
                </div>
            </div>
        </div>
        <div className={styles.table}>
            <div>
                <div></div>
                <div>
                    <Input style={{borderRadius:"20px"}} placeholder="搜索岗位" suffix={<SearchOutlined />} onChange={e => { }} onKeyDown={e => {
                        if (e.keyCode === 13) {}}} />
                </div>

            </div>
            <div>
                <Table style={{ width: "95%", margin: "0 auto", textAlign: "center" }} dataSource={dataSource} columns={columns} />
            </div>
        </div>
    </div>
}


const columns = [
    {
        title: '待办事项',
        dataIndex: 'name',
        key: 'name',
    },
    {
        title: '类型',
        dataIndex: 'age',
        key: 'age',
    },
    {
        title: '发起人',
        dataIndex: 'address',
        key: 'address',
    },
    {
        title: '发起时间',
        dataIndex: 'address',
        key: 'address',
    },
    {
        title: '操作',
        dataIndex: 'address',
        key: 'address',
    },
];
export default NeedHandle